<template>
  <a-card size="small" style="margin-bottom: 10px" :bordered="false">
    <a-flex justify="space-between" align="center">
      <a-flex>
        <span style="font-weight: bold">Modbus从站状态：</span>
        <a-tag :color="status.isConnected?'green':'red'">{{ status.isConnected ? '服务已启动' : '异常' }}
        </a-tag>

      </a-flex>
      <a-button type="primary" ghost @click="loadData">刷新</a-button>
    </a-flex>
    <a-table style="margin-top: 10px" :columns="columns" :data-source="data"></a-table>
  </a-card>
</template>

<script setup>
import {baseRequest} from "@/utils/request.js";
import {ref} from "vue";

const status = ref({})
const data = ref([])

const columns = [
  {
    title: '测点名称',
    dataIndex: 'name',
  },
  {
    title: '寄存器地址',
    dataIndex: 'address',
  },
  {
    title: '数据类型',
    dataIndex: 'type',
  },
  {
    title: '值',
    dataIndex: 'value',
  },
]

const loadData = () => {
  baseRequest("/slave/status", {}).then(res => {
    status.value = res.data.data
  })

  baseRequest("/slave/data", {}).then(res => {
    data.value = res.data.data
  })
}
loadData()

</script>

<style scoped>

</style>
